<template>
	<div class="shishiredian">
		<div class="redianshi">
			<div class="redianshi1">
				<div class="shishishipin">
					<div class="shishishipin1">
						<div class="shishishipin1_1">
							<ul>
								<li v-for="(item,index) in shijian" :key="index">
									{{item.name}}
								</li>
							</ul>
						</div>
						<div class="shishishipin1_2">
							数据更新于19分钟前
						</div>
					</div>
					
					<div class="shipinbiao">
						<table cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th>排名</th>
									<th>热点</th>
									<th>当日新增播放</th>
									<th>视频</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item,index) in 6" :key="index">
									<td>
										<img v-if="index==0" src="../../../assets/img/jinpai.png" />
										<img v-else-if="index==1" src="../../../assets/img/yinpai.png" />
										<img v-else-if="index==2" src="../../../assets/img/tongpai.png" />
										<span v-else>{{index+1}}</span>
									</td>
									<td>
										盘王者峡谷完整版视频，一个人捣盘王者峡谷完整版视频，一个人捣盘王者峡谷完整版视频，一个人捣
									</td>
									<td>
										{{biaoshu | guolv}}
									</td>
									<td>
										<img @click="centerDialogVisible=true" src="../../../assets/img/darentu.png" />
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					
					<div class="fenye" style="text-align: center;">
						<el-pagination
						  @size-change="handleSizeChange"
						  @current-change="handleCurrentChange"
						  :hide-on-single-page="yindi"
						  :current-page="currentPage4"
						  :page-sizes="[100, 200, 300, 400]"
						  :page-size="100"
						  layout="total, sizes, prev, pager, next, jumper"
						  :total="4001">
						</el-pagination>
					</div>
				</div>
			</div>
			<div class="redianshi2">
				<div class="redianshi2_1">
					<div class="redianshi2_2">
						<span>上升热点</span>
					</div>
					<el-tooltip class="item" effect="dark" content="小手手不要离开我,不然我会生气的,不给你刷新" placement="top-start">
						<div class="redianshi2_3">
							<span>
								<i class="el-icon-refresh-right"></i>
							</span>
							<span>刷新</span>
						</div>
					</el-tooltip>
				</div>
				<div class="shuaxinre" v-for="(item,index) in 14" :kay="index">
					<div class="shuaxinre1">
						陈殽维董思伊吻戏
					</div>
					<div class="shuaxinre2">
						<img src="../../../assets/img/huo2.png" />
						<span>
							{{biaoshu | guolv}}
						</span>
					</div>
				</div>
			</div>
		</div>
		
		<el-dialog
		  :visible.sync="centerDialogVisible"
		  width="70%"
		  center>
			<div class="shipintan">
				<div class="shipintan1">
					<div class="shipintan1_1">
						<span>这都算什么遇难台军</span>
					</div>
					<div class="shipintan1_2">
						<img src="../../../assets/img/huo2.png" />
						<span>
							{{biaoshu | guolv}}
						</span>
					</div>
				</div>
				<p class="xiangguanshi">3个相关视频</p>
				
				<div class="shixinxi">
					<div class="xiangshipin1" v-for="(item,index) in 3" :key="index">
						<div class="xiangshi1">
							<img src="../../../assets/img/darentu.png" />
						</div>
						<div class="xiangshi2">
							一直流浪狗狗的前半生。#领样代替购买
						</div>
						<div class="xiangshi3">
							<div class="xiangshi3_1" @click="dianzanshou">
								<img v-if="zanxia" src="../../../assets/img/dianzan3.png" />
								<img v-if="!zanxia" src="../../../assets/img/dianzan4.png" />
								<span>{{xiaoshu | guolv}}</span>
							</div>
							<div class="xiangshi3_1">
								<img src="../../../assets/img/xinxitiao.png" />
								<span>{{xiaoshu | guolv}}</span>
							</div>
							<div class="xiangshi3_1">
								<img src="../../../assets/img/fenxiang.png" />
								<span>{{xiaoshu | guolv}}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-dialog>
		
	</div>
</template>

<script>
	export default{
		name:'shishiredian',
		data(){
			return{
				centerDialogVisible:false,
				biaoshu:12389121,
				xiaoshu:456664,
				shijian:[
					{name:'最新'},
					{name:'6小时'},
					{name:'12小时'},
					{name:'24小时'},
					{name:'近3天'},
					{name:'近7天'},
				],
				//分页
				yindi:true,//当数据是由一页时，就不显示分页器
				currentPage4: 1,
				
				//点赞
				zanxia:true
			}
		},
		activated() {
			
		},
		mounted:function(){
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			//出现加载动画开始和结束
			this.$store.commit("startLoading")
			this.$store.commit("endLoading")
			
			$(".redianshi2_3").hover(function(){
				$(this).children("span:nth-of-type(1)").addClass('tian')
			},function(){
				$(this).children("span:nth-of-type(1)").removeClass("tian")
			})
			
			$(".shishishipin1_1 ul li").click(function(){
				$(this).css({
					"background-color": "#0091FF",
					"color": "#fff",
					"border-radius":"0.05rem" ,
				})
				$(this).siblings().css({
					"background-color": "#fff",
					"color": "#0091FF",
					"border-radius":"0rem" ,
				})
			})
		},
		//过滤器
		filters:{
			guolv(shuzi){
				  if(shuzi>0){
					var wan=parseInt(shuzi).toString();
					var qumo=wan%10000;
					//粉丝数改变
					if(wan.length<5){
						shuzi=wan;
					}else if(wan.length>4 && wan.length<=8){
						let fen_si=parseFloat(parseInt(wan/10000))+'.'+qumo.toString().substring(0,2)+'w';
						shuzi=fen_si;
					}else if(wan.length>8){
						let fen_si=parseFloat(parseInt(wan/100000000))+'.'+qumo.toString().substring(0,2)+'亿';
						shuzi=fen_si;
					}
				  }
				  return shuzi
			}
		},
		methods:{
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			
			//点赞
			dianzanshou(){
				this.zanxia=!this.zanxia;
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shishiredian{
		
		.redianshi{
			
			.redianshi1{
				float: left;
				width: 68%;
				
				.shishishipin{
					padding: 0.8rem;
					background-color: #fff;
					border-radius:0.1rem ;
					.shishishipin1{
						
						.shishishipin1_1{
							float: left;
							ul{
								list-style: none;
								li{
									transition: all 0.2s ease;
									cursor: pointer;
									float: left;
									border: 1px solid #D4D4D4;
									border-left:none ;
									color: #0091FF;
									font-size: 0.4rem;
									padding: 0.15rem 0.4rem;
								}
								li:nth-of-type(1){
									border-left:1px solid #D4D4D4 ;
									background-color: #0091FF;
									color: #fff;
									border-radius:0.05rem ;
								}
							}
						}
						.shishishipin1_2{
							line-height: 0.8rem;
							float: left;
							color: #666666;
							font-size: 0.4rem;
							margin-left:1rem ;
						}
					}
					.shishishipin1::after{
						content: "";
						display: block;
						clear: both;
					}
					
					.shipinbiao{
						margin-top:1rem ;
						
						table{
							width: 100%;
							th{
								color: #333333;
								font-size: 0.5rem;
								padding-bottom: 1.2rem;
								font-weight: normal;
							}
							th:nth-of-type(2){
								width: 9rem;
							}
							td{
								padding: 0.4rem 0;
								text-align: center;
								color: #666;
								font-size: 0.4rem;
							}
							td:nth-of-type(1){
								text-align: center;
								img{
									width: 0.8rem;
								}
							}
							td:nth-of-type(4){
								text-align: center;
								img{
									cursor: pointer;
									width: 4rem;
								}
							}
							td:nth-of-type(2){
								width: 9rem;
								line-height: 2.5rem;
								 white-space:nowrap;//禁止换行
								overflow : hidden;
								text-overflow: ellipsis;
								display: -webkit-box; 
								-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
								-webkit-box-orient: vertical;
							}
						}
					}
				}
				
			}
			.redianshi2{
				float: right;
				width: 30%;
				background-color: #fff;
				padding: 0.3rem 0.4rem;
				box-sizing: border-box;
				
				.redianshi2_1{
					margin-bottom:0.4rem ;
					.redianshi2_2{
						height: 100%;
						box-sizing: border-box;
						float: left;
						position: relative;
						
						span{
							font-size: 0.5rem;
							display: inline-block;
							margin-left:0.8rem ;
							color: #333333;
							letter-spacing: 0.05rem;
						}
						
						span::before{
							content: "";
							display: block;
							position: absolute;
							top: 0.4rem;
							left: 0;
							width: 0.3rem;
							height: 1rem;
							background-color: #0091FF;
						}
					}
					
					.redianshi2_3{
						border: 1px solid #D4D4D4;
						border-radius:0.05rem ;
						margin-top:0.4rem ;
						float: right;
						padding: 0.08rem 0.3rem;
						box-sizing: border-box;
						cursor: pointer;
						display: flex;
						align-items: center;
						justify-content: space-around;
						
						@keyframes  dong{
							0%{
								transform: rotate(0deg);
							}
							100%{
								transform: rotate(1080deg);
							}
						}
						
						span:nth-of-type(1){
							display: block;
							font-size: 0.5rem;
							transition: all 2s ease;
							color: #0091FF;
						}
						.tian{
							animation: dong 2s ease;
						}
						span:nth-of-type(2){
							display: block;
							color: #0091FF;
							font-size: 0.35rem;
							margin-left:0.4rem ;
						}
					}
				}
				.redianshi2_1::after{
					content: "";
					display: block;
					clear: both;
				}
				
				.shuaxinre{
					cursor: pointer;
					padding: 0.6rem 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.shuaxinre1{
						color: #666;
						font-size: 0.4rem;
					}
					.shuaxinre2{
						display: flex;
						justify-content: space-around;
						text-align: right;
						
						img{
							width: 0.3rem;
							height: 0.4rem;
							vertical-align: middle;
							margin-top:0.05rem ;
						}
						span{
							display: block;
							color: #666;
							font-size: 0.4rem;
							margin-left:0.2rem ;
						}
					}
				}
				.shuaxinre:hover .shuaxinre1{
					color: #0091FF;
				}
			}
		}
		.redianshi::after{
			content: "";
			display: block;
			clear:both;
		}
		
		.shipintan{
			
			.shipintan1{
				margin-bottom:0.4rem ;
				.shipintan1_1{
					box-sizing: border-box;
					padding-top:0.6rem ;
					float: left;
					position: relative;
					
					span{
						font-size: 0.5rem;
						display: inline-block;
						margin-left:0.8rem ;
						color: #333333;
						letter-spacing: 0.05rem;
					}
					
					span::before{
						content: "";
						display: block;
						position: absolute;
						top: 0.4rem;
						left: 0;
						width: 0.3rem;
						height: 1rem;
						background-color: #0091FF;
					}
				}
				
				.shipintan1_2{
					padding-right:0.8rem ;
					margin-top:0.6rem ;
					float: right;
					display: flex;
					justify-content: space-around;
					text-align: right;
					
					img{
						width: 0.3rem;
						height: 0.4rem;
						margin-top:0.05rem ;
						vertical-align: middle;
					}
					span{
						display: block;
						color: #FF1200;
						font-size: 0.4rem;
						margin-left:0.2rem ;
					}
				}
			}
			.shipintan1::after{
				content: "";
				display: block;
				clear: both;
			}
			
			.xiangguanshi{
				color: #0091FF;
				font-size: 0.4rem;
				margin:1rem 0 ;
			}
			
			.shixinxi{
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;
				
				.xiangshipin1{
					width: 31%;
					margin-bottom:1rem ;
					padding-bottom:0.6rem ;
					background-color: #fff;
					box-shadow: 0 0 0.2rem rgba(0,0,0,0.2rem);
					
					.xiangshi1{
						img{
							width: 100%;
						}
					}
					.xiangshi2{
						padding:0 0.8rem ;
						padding-top:0.6rem ;
						color: #333333;
						font-size: 0.4rem;
						
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box; 
						-webkit-line-clamp: 1; /* 可以显示的行数，超出部分用...表示*/
						-webkit-box-orient: vertical;
					}
					.xiangshi3{
						padding:0 0.8rem ;
						padding-top:0.6rem ;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.xiangshi3_1{
							display: flex;
							justify-content: space-between;
							align-items: center;
							img{
								width: 0.4rem;
								vertical-align: middle;
							}
							span{
								display: block;
								// margin-top:-0.15rem ;
								margin-left:0.2rem ;
								color: #999999;
								font-size: 0.35rem;
							}
						}
						.xiangshi3_1:nth-of-type(1){
							cursor: pointer;
						}
					}
				}
			}
		}
	}
</style>
